预加载 WASM

背景
步骤
- JS
- React
特别感谢

背景

当从 @rive-app/* 包中渲染一个 new Rive() 实例，或从 @rive-app/react-* 包中渲染 <RiveComponent /> 时，你的浏览器会向 https://unpkg.com/@rive-app/[email protected]/rive.wasm 发起一个网络请求，以获取包含 Rive 特定 API 的 Web Assembly (WASM) 文件，用于构建渲染循环。unpkg 是一个全球 CDN，可以快速加载 NPM 包，在这种情况下，它包含一个 WASM 文件。这使得在引入基于 Rive JS 的运行时包时，包体积更小，同时仅在创建 Rive 实例时加载 WASM。虽然 unpkg 应该能够快速提供 WASM 文件，并且可以在从该 CDN 加载的站点之间进行缓存，但出于以下原因，你可能希望自己预加载并托管 WASM 文件：

提高驱动 Rive 动画的 WASM 的可靠性
加快动画的加载速度
控制资源何时加载到你的 Web 应用中

步骤

根据你使用的基于 JS 的运行时（即 JS、React 等），按照以下部分自行托管从基础 JS 运行时加载的 WASM 文件。

JS

如果你使用的是基础的 @rive-app/canvas 或 @rive-app/webgl 或任何纯 JS 变体的 Rive 运行时，请将 WASM 资源导入你的应用，并使用 运行时（Runtime）Loader API：

import riveWASMResource from '@rive-app/canvas/rive.wasm';
import { Rive, 运行时（Runtime）Loader } from '@rive-app/canvas';

运行时（Runtime）Loader.setWasmUrl(riveWASMResource);
...
const riveInstance = new Rive({
  src: 'foo.riv',
  ...
});

RuntimeLoader 是一个单例（Singleton），在加载 Rive 实例时，它会在后台管理 WASM 文件的加载。通过调用 setWasmUrl API，你可以使用直接导入的 WASM 文件的数据 URI 来加载 Rive 运行时的 WASM。在任何包含 Rive 动画的页面上运行此 API 以进行加载。

你可能需要在构建工具中添加配置，以导入 WASM 文件并将其内联为数据 URI。请参阅原始博客文章，该文章启发了我们将这些内容添加到文档中，以获取一些指导。

React

如果你正在使用 @rive-app/react-canvas 或 @rive-app/react-webgl，请将 WASM 资源以及 RuntimeLoader API 导入到你的应用中：

import riveWASMResource from '@rive-app/canvas/rive.wasm';
import { useRive, RuntimeLoader } from '@rive-app/react-canvas';

RuntimeLoader.setWasmUrl(riveWASMResource);

const MyComponent = () => {
  const { rive, RiveComponent } = useRive({
    src: 'foo.riv',
    ...
  });
};

RuntimeLoader 是一个单例（Singleton），它在加载 Rive 实例时负责在后台管理 WASM 文件的加载。通过调用 setWasmUrl API，你可以使用直接导入的 WASM 文件的数据 URI 来加载 Rive 运行时的 WASM。在任何包含 Rive 动画的页面上运行此 API 以进行加载。

你可能需要在构建工具中添加配置以导入 WASM 文件。请参阅原始博客文章，该文章启发了我们将这些内容添加到文档中，以获取一些指导。你可以通过设置构建工具来预加载 WASM 模块，以便在创建 Rive 实例的相关页面中快速加载 Web Assembly，从而加速 Rive 动画的实例化。

例如，在 Next.js 中，你可以将以下代码附加到主页面布局中：

import { Html, Head } from "next/document";
import riveWASMResource from '@rive-app/canvas/rive.wasm';

export default function Document() {
  return (
    <Html>
      <Head>
        <link rel="preload" href={riveWASMResource} as="fetch" crossOrigin="anonymous" />
      </Head>
    </Html>
  );
}

你可能需要安装与 @rive-app/react-canvas 相关联的 React 版本所绑定的 @rive-app/canvas 版本，否则在运行时可能会遇到问题。例如，@rive-app/[email protected] 将 JS 依赖项绑定在 @rive-app/[email protected] 上；因此，你可能需要安装该特定版本的 JS 运行时以确保兼容性。

特别感谢

特别感谢 Alex Barashkov 的原始博客文章，这篇文章启发了我们添加这个技巧。

https://dev.to/alex_barashkov/optimization-techniques-for-rive-animations-in-react-apps-1a8p

背景​

步骤​

JS​

React​

特别感谢​

背景

步骤

JS

React

特别感谢